<template>
  <div>
    <v-title></v-title>
    <v-back></v-back>

    <div class="con">
       <img :src="$baseUrl + detailList.img" alt="">
       <p>商品名称：{{ detailList.goodsname }}</p>
       <p>商品价格：{{ detailList.price }}</p>
       <div v-html="detailList.description"></div>
    </div>

    <div class="bottom">
      <button @click="addCar">加入购物车</button>
    </div>
  </div>
</template>
  
  <script>
  import {getGoodsinfo,cartadd} from "../request/api.js"
export default {
  data() {
    return {
      detailList: {}
    };
  },
  methods:{
    //1.请求数据的方法
    getDetail(){
      //参数是商品的id
      getGoodsinfo({id:this.$route.params.id})
      .then(res=>{
         if(res.data.code == 200){
           this.detailList = res.data.list[0];
           console.log(this.detailList);
         }else{
          alert(res.data.msg)
         }
      })
      .catch(err=>{
        console.log(err);
      })
    },
    //加入购物车
    addCar(){
      //获取登录完成后，存储的用户的uid
      let uid = JSON.parse(localStorage.getItem("userinfo") || "{}").uid
      cartadd({
        uid,
        goodsid:this.$route.params.id,
        num:1
      })
      .then(res=>{
        if(res.data.code == 200){
          alert("添加成功，在购物车等你哦！")
        }else{
          alert(res.data.msg);
        }
      })
      .catch(err=>{
        console.log(err);
      })
    }
  },
  mounted() {
    //1.请求商品详情数据
    this.getDetail();
  }
};
</script>
  
  <style scoped>
  .con img{
    width: 100vw;
  }
.bottom{
  width: 100vw;
  height: .6rem;
  background: orange;
  position: fixed;
  bottom: 0;

}
</style>